<template>
  <!-- 我的 -->
  <div class="myBox">
    <!-- 自定义的导航栏 -->
    <div class="header">我的</div>
    <div class="content">
      <!-- 维修信息 -->
      <div class="row mainInfoItem">
        <div class="left col-flex-around">
          维修信息
        </div>
        <div class="right row-flex gray ">
          <span class="number itemText col-flex-around" >1</span>
          <span class="myIcon iconfont icon-xiangyou col-flex-around"></span>
        </div>
      </div>
      <!-- 头像 -->
      <div class="row headImgItem">
        <div class="left col-flex-around">
          头像
        </div>
        <div class="right row-flex gray">
          <div class="imgBox">
            <img src="" alt="">
          </div>
        </div>
      </div>
      <!-- 姓名 -->
      <div class="row nameItem">
        <div class="left col-flex-around">
          姓名
        </div>
        <div class="right row-flex gray">
          <span class="itemText col-flex-around">李四</span>
          <span class="myIcon iconfont icon-xiangyou col-flex-around"></span>
        </div>
      </div>
      <!-- 职位 -->
      <div class="row positionItem">
        <div class="left col-flex-around">
          职位
        </div>
        <div class="right row-flex gray">
          <span class="itemText col-flex-around">设备维修工</span>
          <span class="myIcon iconfont icon-xiangyou col-flex-around"></span>
        </div>
      </div>
      <!-- 手机号 -->
      <div class="row phoneItem">
        <div class="left col-flex-around">
          手机号
        </div>
        <div class="right row-flex gray">
          <span class="itemText col-flex-around">手机号</span>
          <span class="myIcon iconfont icon-xiangyou col-flex-around"></span>
        </div>
      </div>
      <!-- 通讯录 -->
      <div class="row mailListItem">
        <div class="left col-flex-around">
          通讯录
        </div>
        <div class="right row-flex gray">
          <span class="itemText col-flex-around">18009400337</span>
        </div>
      </div>
      <!-- 退出登录 -->
      <div class="LogoutItem">
        <div class="left col-flex-around">
          退出登录
        </div>
      </div>
    </div>
  </div>
</template>

<script>


export default {
  data () {
    return {
     
    }
  },

  components: {
    
  },

  methods: {
    
  },

  created () {
    // let app = getApp()
  }
}
</script>

<style scoped>
.myBox{
  height: 100%;
}
  .mainInfoItem,.positionItem,.phoneItem{
    border-bottom: solid 1px #EBEBEB;
  }
  .headImgItem{
    border-top: solid 1px #EBEBEB;
    border-bottom: solid 1px #EBEBEB;
  }
  .nameItem{
    border-bottom: solid 1px #EBEBEB;
  }
  .headImgItem{
    margin-top: 30rpx;
  }
  .mailListItem, .LogoutItem{
    margin: 30rpx 0;
    border-top: solid 1px #EBEBEB;
    border-bottom: solid 1px#EBEBEB;
  }
  .LogoutItem{
    background: #ffffff;
    padding: 30rpx 0;
    text-align: center;
    color: #476EB2;
  }
  .number{
    border-radius: 50%;
    background: #FF6A4C;
    width: 40rpx;
    height: 40rpx;
    color: #ffffff;
    text-align: center;
  }
  .myIcon{
    font-size: 20px;
  }
  .imgBox{
    width: 80rpx;
    height: 80rpx;
    overflow: hidden;
    border-radius: 50%;
    background: red;
  }
  .imgBox>img{
    width: 100%;
    height: 100%;
  }
  .itemText{
    margin-right: 20rpx;
  }
</style>
